import { NavLink, withRouter } from 'react-router-dom';
import { Breadcrumb } from 'antd';
import styles from './style.scss';
const breadcrumbNameMap = {
  '/': '首页',
  '/orders': '订单',
  '/orders/detail': '详情',
  '/bill':'入库',
  '/material':'物资'
};
const Breadcrumbs = withRouter((props) => {
  const { location } = props;
  const pathSnippets = location.pathname.split('/').filter(i => i);
  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    return (
      <Breadcrumb.Item key={url}>
        <NavLink to={url} activeClassName={styles.navActive}>
          {breadcrumbNameMap[url]}
        </NavLink>
      </Breadcrumb.Item>
    );
  });
  const breadcrumbItems = [(
    <Breadcrumb.Item key="home">
      <NavLink to="/" activeClassName={styles.navActive}>Home</NavLink>
    </Breadcrumb.Item>
  )].concat(extraBreadcrumbItems);
  return (
    <div>
      <Breadcrumb>
        {breadcrumbItems}
      </Breadcrumb>
    </div>
  );
});
export default Breadcrumbs;